<template>

  <ContentWrap>
    <el-form
      ref="formRef"
      v-loading="formLoading"
      :model="formData"
      :rules="formRules"
      label-width="120px"
    >
      <el-form-item v-show="false" label="hideId">
        <el-input v-model="formData.id" />
      </el-form-item>
      <el-tabs>
        <!-- 审核 -->
        <el-tab-pane label="上线审核">
          <el-form-item label="启用审核标记" prop="authEnabled">
            <el-switch v-model="formData.authEnabled" style="user-select: none" />
            <el-text class="w-full" size="small" type="info"> 启用审核标记，此期间注册的用户会被标记，下面开关只会对标记用户起效，所以记得审核通过立即关闭标记功能。</el-text>
          </el-form-item>
          <el-form-item label="启用微信" prop="weixinEnabled">
            <el-switch v-model="formData.weixinEnabled" style="user-select: none" />
            <el-text class="w-full" size="small" type="info"> 是否显示填写微信</el-text>
          </el-form-item>
          <el-form-item label="启用打赏" prop="giftEnabled">
            <el-switch v-model="formData.giftEnabled" style="user-select: none" />
            <el-text class="w-full" size="small" type="info"> 是否显示打赏功能</el-text>
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane label="站点配置">
          <el-form-item label="线下开通城市" prop="openCityAreas">
            <el-select
              v-model="formData.openCityAreas"
              allow-create
              filterable
              multiple
              placeholder="请直接输入开通城市"
            >
              <el-option
                v-for="area in formData.openCityAreas"
                :key="area"
                :label="area"
                :value="area"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="启用达人" prop="peiwanEnabled">
            <el-switch v-model="formData.peiwanEnabled" style="user-select: none" />
            <el-text class="w-full" size="small" type="info"> 首页是否显示达人</el-text>
          </el-form-item>
          <el-form-item label="启用交友" prop="friendEnabled">
            <el-switch v-model="formData.friendEnabled" style="user-select: none" />
            <el-text class="w-full" size="small" type="info"> 首页是否显示交友</el-text>
          </el-form-item>
          <el-form-item label="发帖积分" prop="trendPoint">
            <el-input-number
              v-model="formData.trendPoint"
              :precision="0"
            />
            <el-text class="w-full" size="small" type="info"> 发帖需要积分</el-text>
          </el-form-item>
          <el-form-item label="注册积分" prop="regPoint">
            <el-input-number
              v-model="formData.regPoint"
              :precision="0"
            />
            <el-text class="w-full" size="small" type="info"> 注册赠送积分</el-text>
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane label="微信小程序">
          <el-form-item label="广告ID" prop="adUnitId">
            <el-input v-model="formData.adUnitId" />
            <el-text class="w-full" size="small" type="info"> 激励广告视频id</el-text>
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane label="微信公众号">
          <el-form-item label="二维码" prop="qrcode">
            <UploadImg v-model="formData.qrcode" height="125px" width="125px" />
            <el-text class="w-full" size="small" type="info"> 公众号二维码</el-text>
          </el-form-item>
          <el-form-item label="是否关注" prop="qrcodeEnabled">
            <el-switch v-model="formData.qrcodeEnabled" style="user-select: none" />
            <el-text class="w-full" size="small" type="info"> 是否需要关注公众号</el-text>
          </el-form-item>
        </el-tab-pane>

      </el-tabs>
      <!-- 保存 -->
      <el-form-item>
        <el-button :loading="formLoading" type="primary" @click="submitForm"> 保存</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
</template>

<script lang="ts" setup>
import * as ConfigApi from '@/api/mall/trade/config'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { cloneDeep } from 'lodash-es'

defineOptions({ name: 'TradeConfig' })

const message = useMessage() // 消息弹窗

const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formRef = ref()
const formData = ref({
  id: null,
  afterSaleRefundReasons: [],
  afterSaleReturnReasons: [],
  openCityAreas: [],
  deliveryExpressFreeEnabled: false,
  deliveryExpressFreePrice: 0,
  deliveryPickUpEnabled: false,
  brokerageEnabled: false,
  brokerageEnabledCondition: undefined,
  brokerageBindMode: undefined,
  brokeragePosterUrls: [],
  brokerageWorkerPercent: 0,
  brokerageRewardPercent: 0,
  brokerageFirstPercent: 0,
  brokerageSecondPercent: 0,
  brokerageWithdrawMinPrice: 0,
  brokerageWithdrawFeePercent: 0,
  brokerageFrozenDays: 0,
  brokerageWithdrawTypes: [],
  authEnabled: false,
  weixinEnabled: true,
  giftEnabled: true,
  peiwanEnabled: true,
  friendEnabled: true,
  qrcodeEnabled: true,
  qrcode: '',
  trendPoint: 0,
  regPoint: 0,
  adUnitId: '',
})
const formRules = reactive({
  deliveryExpressFreePrice: [{ required: true, message: '满额包邮不能为空', trigger: 'blur' }],
  brokerageEnabledCondition: [{ required: true, message: '分佣模式不能为空', trigger: 'blur' }],
  brokerageBindMode: [{ required: true, message: '分销关系绑定模式不能为空', trigger: 'blur' }],
  brokerageWorkerPercent: [{ required: true, message: '店员返佣比例不能为空', trigger: 'blur' }],
  brokerageRewardPercent: [{ required: true, message: '打赏返佣比例不能为空', trigger: 'blur' }],
  brokerageFirstPercent: [{ required: true, message: '一级返佣比例不能为空', trigger: 'blur' }],
  brokerageSecondPercent: [{ required: true, message: '二级返佣比例不能为空', trigger: 'blur' }],
  brokerageWithdrawMinPrice: [
    { required: true, message: '用户提现最低金额不能为空', trigger: 'blur' }
  ],
  brokerageWithdrawFeePercent: [{ required: true, message: '提现手续费不能为空', trigger: 'blur' }],
  brokerageFrozenDays: [{ required: true, message: '佣金冻结时间不能为空', trigger: 'blur' }],
  brokerageWithdrawTypes: [
    {
      required: true,
      message: '提现方式不能为空',
      trigger: 'change'
    }
  ]
})

const submitForm = async () => {
  if (formLoading.value) return
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    const data = cloneDeep(unref(formData.value)) as unknown as ConfigApi.ConfigVO
    // 金额放大
    data.deliveryExpressFreePrice = data.deliveryExpressFreePrice * 100
    data.brokerageWithdrawMinPrice = data.brokerageWithdrawMinPrice * 100
    await ConfigApi.saveTradeConfig(data)
    message.success('保存成功')
  } finally {
    formLoading.value = false
  }
}

/** 查询交易中心配置 */
const getConfig = async () => {
  formLoading.value = true
  try {
    const data = await ConfigApi.getTradeConfig()
    if (data != null) {
      formData.value = data
      // 金额缩小
      formData.value.deliveryExpressFreePrice = data.deliveryExpressFreePrice / 100
      formData.value.brokerageWithdrawMinPrice = data.brokerageWithdrawMinPrice / 100
    }
  } finally {
    formLoading.value = false
  }
}

/** 初始化 **/
onMounted(() => {
  getConfig()
})
</script>
